<%@ page language="java" pageEncoding="utf-8"%>

<!--/*** CSS样式 **/-->
<style>
    .input_datalist_all{ height: 24px;width: 300px;padding:0;clear: both; }
    .input_datalist_all input{ width: 18px;height: 18px;margin: 0px;margin-left: 6px;margin-right: 6px;float: left; }
    .input_datalist_all p{ font-size: 18px;color: rgb(65, 137, 203);margin:0;float: left; }
    .input_datalist{ width: 300px;height: 160px;padding: 0;border: 1px solid rgb(65, 137, 203);background-color: white; }
    .input_datalist_scroll{ width: 298px;height: 158px;overflow-y: auto;overflow-x: hidden; padding: 0; }
    .input_datalist_cell{  width: 298px;height: 24px;margin: 0;padding: 0;border-bottom: 1px solid rgb(65, 137, 203);clear: both;  }
    .input_datalist_cell input{ width: 18px;height: 18px;margin: 3px 5px 3px 5px;float: left; }
    .input_datalist_cell p{ width: 260px;margin: 0;padding: 0;font-size: 16px;line-height: 24px;text-indent: 7px;color: rgb(65, 137, 203);border-left: 1px solid rgb(65, 137, 203);float: left; }
    .input_datalist_cell_mouseover{  background-color: #AFEEEE;  }
    .input_datalist_cell_selected{  background-color: #AFEEEE;  }
</style>


<!--/*** 控件HTML标签 **/-->
<div class="col-md-12" style="margin-top:15px;padding: 0 0 0 8px;">

    <div class="col-md-3" style="padding: 0;">
        <label style="color: rgb(65, 137, 203);font-size: 13px;padding: 0px;margin: 0px;">管制图:</label>
    </div>

    <div id="controlChartCheckbox" class="col-md-9">
        <div class="input_datalist_all">
            <input type="checkbox">
            <p>ALL</p>
        </div>
        <div class="input_datalist">
            <div class="input_datalist_scroll">
            </div>
        </div>
    </div>

</div>


<!--数据请求/与后台的交互  Script事件-->
<script>
    $(document).ready(function () {
        function iniControlChartCheckboxFunc(){
            $("#controlChartCheckbox .input_datalist_scroll").empty();
            var control_chart_grp = '';
            if ($("#controlChartGrpCheckbox").length > 0) {
                $("#controlChartGrpCheckbox .input_datalist_scroll .input_datalist_cell input:checked").each(function(){
                    if (control_chart_grp != '') {
                        control_chart_grp = control_chart_grp + "," + $.trim($(this).val());
                    }else {
                        control_chart_grp = $.trim($(this).val());
                    }
                });
            }else if ($("#controlChartGrpSel").length > 0) {
                control_chart_grp = $.trim($("#controlChartGrpSel").val());
            }
            var inTrxObj = {
                control_chart_grp  : control_chart_grp,
                calc_cl_flg        : 'Y',
                trx_id             : 'XPCONDITION',
                action_flg         : 'CCHART'
            };
            var  outTrxObj = comTrxSubSendPostJson(inTrxObj);
            console.log(outTrxObj);
            if(  outTrxObj.rtn_code == "0000000" ) {
                for (var i=0; i<outTrxObj.oary.length; i++) {
                    $("#controlChartCheckbox .input_datalist_scroll").append("<div class='input_datalist_cell'> <input type='checkbox' value='" + outTrxObj.oary[i].value + "'><p>" + outTrxObj.oary[i].text + "</p></div>");
                }
            }

            /*** checkbox鼠标进入事件 **/
            $("#controlChartCheckbox .input_datalist_cell").mouseover(function () {
                $(this).addClass("input_datalist_cell_mouseover");
            });
            /*** checkbox鼠标移出事件 **/
            $("#controlChartCheckbox .input_datalist_cell").mouseout(function () {
                $(this).removeClass("input_datalist_cell_mouseover");
            });
            /*** div点击事件 **/
            $("#controlChartCheckbox .input_datalist_cell").click(function () {
                var input_checkbox = $(this).find('input');
                if (input_checkbox.attr('checked')) {
                    input_checkbox.attr('checked',false);
                    $(this).removeClass("input_datalist_cell_selected");
                }else {
                    input_checkbox.attr('checked', true);
                    $(this).addClass("input_datalist_cell_selected");
                }
            });
            /*** checkbox点击防止事件冒泡 **/
            $("#controlChartCheckbox input[type='checkbox']").click(function(e){
                e.stopPropagation();
            });
            /*** checkbox点击事件 **/
            $("#controlChartCheckbox .input_datalist_cell input").click(function () {
                if ($(this).attr('checked')) {
                    $(this).parent().addClass("input_datalist_cell_selected");
                }else {
                    $(this).parent().removeClass("input_datalist_cell_selected");
                }
            });
            /*** 全选/全不选事件 **/
            $("#controlChartCheckbox .input_datalist_all input").click(function () {
                //$("#controlChartCheckbox .input_datalist_cell input").prop("checked", $(this).prop("checked"));
                if ($(this).attr('checked')) {
                    $("#controlChartCheckbox .input_datalist_cell input").attr('checked', true);
                    $("#controlChartCheckbox .input_datalist_cell").addClass("input_datalist_cell_selected");
                }else {
                    $("#controlChartCheckbox .input_datalist_cell input").attr('checked', false);
                    $("#controlChartCheckbox .input_datalist_cell").removeClass("input_datalist_cell_selected");
                }
            });
        };
        iniControlChartCheckboxFunc();
        $("#controlChartGrpSel").change(iniControlChartCheckboxFunc);

        /*** 管制图组checkbox控件复选框状态改变事件 **/
        $("#controlChartGrpCheckbox .input_datalist_cell").click(iniControlChartCheckboxFunc);
        $("#controlChartGrpCheckbox input").each(function(){
            $(this).change(iniControlChartCheckboxFunc);
        });
    });
</script>



